<template>
  <div>
    <main-nav :index="-1"></main-nav>
    <div class="container">
      <h1>新闻资讯</h1>
      <i-row :gutter="20" class="margin-top-15 margin-bottom-10">
        <i-col :md="6" :sm="8" :xs="12" v-for="(item, index) in news" v-bind:key="'course_' + index">
          <course-item :data="item"></course-item>
        </i-col>
      </i-row>
      <p v-show="totalLessons === 0">暂无数据</p>
      <i-page v-show="totalLessons" :page-size="12" :total="totalLessons" style="text-align: center" :current="page" size="small" @on-change="search" show-total show-elevator></i-page>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import MainNav from '../components/main-nav'
import CourseItem from '../components/course-item'
export default {
  components: {
    MainNav,
    CourseItem
  },
  data() {
    return {
      page: 1
    }
  },
  computed: {
    ...mapGetters({
      news: 'lessons',
      totalLessons: 'totalLessons'
    })
  },
  watch: {
    page(page) {
      this.search(page)
    }
  },
  methods: {
    ...mapActions({
      searchLessons: 'searchLessons'
    }),
    search(page) {
      page = page || 1
      this.searchLessons({
        courseType: 'News',
        page: page
      })
    }
  },
  activated() {
    this.search()
  }
}
</script>

<style lang="less" scoped>
h1 {
  margin: 15px 0;
}
</style>
